const path = require('path');
const glob = require('glob');
const webpack = require('webpack');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const htmlPlugin = require('html-webpack-plugin');
const extractTextPlugin = require('extract-text-webpack-plugin');
const PurifyCSSPlugin = require('purifycss-webpack');
const entry = require('./webpack_config/entry_webpack.js');
//const copyWebpackPlugin = require('copy-webpack-plugin');

if(process.env.type=="build"){
	var website = {
		publicPath:'http://192.168.1.178:8020/wp/dist/'
		//publicPath: './',
	};
}else{
	var website = {
		//publicPath: 'http://127.0.0.1:1717/',
		publicPath:'http://192.168.1.178:8020/wp/dist/'
	};
}

module.exports = {
	devtool:'source-map',
	entry: entry.path,
	output: {
		path: path.resolve(__dirname, 'dist'),
		filename: '[name].js',
		 /*
	     * chunkFilename用来打包require.ensure方法中引入的模块,如果该方法中没有引入任何模块则不会生成任何chunk块文件
	     * 比如在main.js文件中,require.ensure([],function(require){alert(11);}),这样不会打包块文件
	     * 只有这样才会打包生成块文件require.ensure([],function(require){alert(11);require('./greeter')})
	     * 或者这样require.ensure(['./greeter'],function(require){alert(11);})
	     * chunk的hash值只有在require.ensure中引入的模块发生变化,hash值才会改变
	     * 注意:对于不是在ensure方法中引入的模块,此属性不会生效,只能用CommonsChunkPlugin插件来提取
	     * */
	    chunkFilename:'js/[chunkhash:8].chunk.js',
		publicPath: website.publicPath,
	},
	//模块 css ,img 转成js
	//loaders
	module: {
		rules: [
			{
				//用于分离css文件
				test: /\.css$/,
				use: extractTextPlugin.extract({
					fallback: 'style-loader',
					use: [
						{
							loader:'css-loader',
							options:{
								importLoaders:1
							},
						},
						{
							loader:'postcss-loader',
						}
					],
				}),
			},
			{
				test: /\.(png|jpg|gif)/,
				use: [{
					loader: 'url-loader',
					options: {
						limit: 50
					},
				}],
			},
			{
				//用于解析html文件内引用的图片，
				test: /\.(html|htm)$/i,
				use: ['html-withimg-loader'],
			},
			{
				//用于分离css文件
				test: /\.less$/,
				use: extractTextPlugin.extract({
					use: [
						{
							loader: 'css-loader',
						},
						{
							loader:'postcss-loader',
						},
						{
							loader: 'less-loader',
						}
					],
					fallback: 'style-loader',
				}),
			},
			{
				test: /\.(jsx|js)$/,
				use: {
					loader:'babel-loader',
					/*options:{//有.babelrl就不要这段
						presets: ['env']
					}*/
				},
				exclude:/node_modules/,
			},
		],
	},
	//插件
	plugins: [
		new webpack.optimize.CommonsChunkPlugin({//提取公共代码的插件
			name: 'vendors',//单独抽离入口文件中的jquery模块
			filename: 'assets/js/[name]-[hash:6].js',
			minChunks:2,		
		}),
		//new UglifyJsPlugin(),//js压缩混淆插件
		new webpack.ProvidePlugin({
			vue:'vue'//全局挂载插件:如果某个js文件里直接(没有import)用到了$,打包时候才会把jquery源码打包到那个js文件里
		}),
		new htmlPlugin({
			minify: {
				removeAttributeQuotes: true, //去掉dom元素属性val外的引号
			},
			hash: true, //避免浏览器缓存
			template: path.resolve(__dirname, './src/index.html'),//以此为html模版
		}),
		new extractTextPlugin('css/[name].min.css'),
		new PurifyCSSPlugin({
			//删除页面中多余的css
			paths:glob.sync(path.join(__dirname,'src/*.html')),
		}),
		new webpack.BannerPlugin('朱霄'),//版权标记
		/*new copyWebpackPlugin([{
			from:__dirname + '/src/public',
			to:'./public',
		}]),*/
		new webpack.HotModuleReplacementPlugin(),//确保热加载
	],
	devServer: {
		contentBase: path.resolve(__dirname, 'dist'),
		host: '127.0.0.1',
		compress: true,
		port: 1717,
	},
	watchOptions:{
		poll:1000,
		aggregeateTimeout:500,
		ignored:/node_modules/,
	}
	
};
/*Loaders和Plugins常常被弄混，但是他们其实是完全不同的东西：
Loaders是在打包构建过程中用来处理源文件的（JSX，Scss，Less..），
一次处理一个;插件并不直接操作单个文件，它直接对整个构建过程其作用*/